<template>
  <a-row>
    <a-col :span="13">
      <a-descriptions bordered :column="1">
        <!-- 设备模式 -->
        <a-descriptions-item :labelStyle="statusColor">
          <template v-slot:label>
            <WindowsFilled /> 设备模式
          </template>
          <a-link :underline="false" style="line-height: 28px; font-size: 16px; padding-right: 10px">{{
            updateStatusLabel(deviceInfoStatus)
          }}</a-link>
        </a-descriptions-item>
        <!-- 设备升级-->
        <a-descriptions-item :labelStyle="statusColor">
          <template v-slot:label>
            <ArrowUpOutlined /> OTA升级
          </template>
          <a-link :underline="false" style="line-height: 28px; font-size: 16px; padding-right: 10px">Version{{
            deviceInfoStatus.firmwareVersion }}</a-link>
          <a-button type="primary" size="mini" style="float: right" :disabled="deviceInfoStatus.status != 3">
            检查更新
          </a-button>
        </a-descriptions-item>
        <!-- 设备物模型-->
        <a-descriptions-item :labelStyle="statusColor" v-if="deviceList.datatype.arrayParams">
          <template v-slot:label>
            <SlidersFilled /> 子设备
          </template>
          <div v-for="(item, index) in deviceList.datatype.arrayParams" :key="index">

            <a-collapse>
              <a-collapse-panel :header="devicename + (index + 1)">
                <a-descriptions :column="1" bordered size="mini">
                  <a-descriptions-item label="上报监测数据" :labelStyle="status">
                    <a-input placeholder="请输入" v-model="item[0].value">
                      <template #suffix>
                        <a-tooltip title="Extra information">
                          <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
                        </a-tooltip>
                      </template>
                    </a-input>
                  </a-descriptions-item>
                  <a-descriptions-item label="运行档位" :labelStyle="status">
                    <a-select style="width: 200px" v-model:value="item[1].value" :options="options"></a-select>
                  </a-descriptions-item>
                  <a-descriptions-item label="设备开关" :labelStyle="status">
                    <a-switch v-model:checked="item[2].value" />
                  </a-descriptions-item>
                  <a-descriptions-item label="空气温度-只读" :labelStyle="status">
                    <a-input placeholder="请输入小数" :disabled="true" v-model:value="item[3].value">
                    </a-input>
                  </a-descriptions-item>
                  <a-descriptions-item label="射频遥控" :labelStyle="status">
                    <a-button style="margin:5px">遥控学习</a-button>
                    <a-button style="margin:5px">遥控清码</a-button>
                    <a-button style="margin:5px">打开开关</a-button>
                    <a-button style="margin:5px">关闭开关</a-button>
                    <a-button style="margin:5px">暂停</a-button>
                    <a-button style="margin:5px">锁定</a-button>
                  </a-descriptions-item>
                </a-descriptions>
              </a-collapse-panel>
            </a-collapse>

          </div>

        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="report_monitor_name">
          <template v-slot:label>
            <SlidersFilled /> 功能分组
          </template>
          <a-descriptions :column="1" bordered size="mini">
            <a-descriptions-item label="上报监测数据" :labelStyle="status">
              <a-input placeholder="请输入" v-model:value="report_monitor">
                <template #suffix>
                  <a-tooltip title="Extra information">
                    <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-descriptions-item>
            <a-descriptions-item label="射频遥控" :labelStyle="status" v-if="device_irc_name">
              <a-button style="margin:5px">遥控学习</a-button>
              <a-button style="margin:5px">遥控清码</a-button>
              <a-button style="margin:5px">打开开关</a-button>
              <a-button style="margin:5px">关闭开关</a-button>
              <a-button style="margin:5px">暂停</a-button>
              <a-button style="margin:5px">锁定</a-button>
            </a-descriptions-item>
            <a-descriptions-item label="运行档位" :labelStyle="status" v-if="gear_name">
              <a-select style="width: 200px" v-model:value="gear" :options="options"></a-select>
            </a-descriptions-item>
            <a-descriptions-item label="设备开关" :labelStyle="status" v-if="deviceswitch_name">
              <a-switch v-model:checked="deviceswitch" />
            </a-descriptions-item>
            <a-descriptions-item label="空气温度-只读" :labelStyle="status" v-if="temperature_name">
              <a-input placeholder="请输入小数" :disabled="true" v-model:value="temperature">
              </a-input>
            </a-descriptions-item>
          </a-descriptions>
        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="messageTscreen_name">
          <template v-slot:label>
            <SlidersFilled /> 屏显消息
          </template>
          <a-input placeholder="请输入字符串" v-model:value="messageTscreen">
            <template #suffix>
              <a-tooltip title="Extra information">
                <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip>
            </template>
          </a-input>
        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="reseta_name">
          <template v-slot:label>
            <SlidersFilled /> 设备重启
          </template>
          <a-button style="margin:5px">重启</a-button>
        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="light_color_name">
          <template v-slot:label>
            <SlidersFilled /> 灯光色值
          </template>
          <a-descriptions :column="1" bordered size="mini">
            <a-descriptions-item label="灯光色值1" :labelStyle="status">
              <a-input v-model:value="light_color.split(',')[0]">
                <template #suffix>
                  <a-tooltip title="Extra information">
                    <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-descriptions-item>
            <a-descriptions-item label="灯光色值2" :labelStyle="status">
              <a-input v-model:value="light_color.split(',')[1]">
                <template #suffix>
                  <a-tooltip title="Extra information">
                    <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-descriptions-item>
            <a-descriptions-item label="灯光色值3" :labelStyle="status">
              <a-input v-model:value="light_color.split(',')[2]">
                <template #suffix>
                  <a-tooltip title="Extra information">
                    <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-descriptions-item>
          </a-descriptions>
        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="deviceswitch_name">
          <template v-slot:label>
            <SlidersFilled /> 设备开关
          </template>
          <a-switch v-model:checked="deviceswitch" />
        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="report_monitor_name">
          <template v-slot:label>
            <SlidersFilled /> 上报监测数据
          </template>
          <a-slider :min="0" :max="10" v-model:value="report_monitor" />
        </a-descriptions-item>
        <a-descriptions-item :labelStyle="statusColor" v-if="gear_name">
          <template v-slot:label>
            <SlidersFilled /> 运行档位
          </template>
          <a-select style="width: 200px" v-model:value="gear" :options="options"></a-select>
        </a-descriptions-item>
      </a-descriptions>
    </a-col>
    <a-col :span="10"
      style="background-color: #f5f7fa; padding: 20px 10px 20px 10px; border-radius: 15px;margin-left:35px">
      <a-row>
        <a-col :span="11" v-for="(item, index) in chartList" :key="index" style="margin-left:10px">
          <a-card shadow="hover" style="border-radius: 30px; margin-bottom: 20px">
            <div ref="mapRefs" style="height: 190px; width: 180px; margin: 0 auto"></div>
          </a-card>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import * as echarts from "echarts"
import { useRoute } from 'vue-router';
import { deviceApi } from "/src/api/device/device.js";

// 引用元素数组
const mapRefs = ref([]);
const route = useRoute();
// 监控图表的数组
const monitorChart = ref([]);

const report_monitor = ref("");//上报检测数据

const gear = ref("");//运行挡位

const deviceswitch = ref("");//设备开关

const temperature = ref("");//空气温度

const messageTscreen = ref("");//屏显消息

const light_color = ref("");//灯光

const device_irc = ref("");//sheb

const reseta = ref("")



function updateStatusLabel(device) {
  if (device.status == 3) {
    return "在线模式";
  } else {
    if (device.isShadow == 1) {
      return "影子模式";
    } else {
      return "离线模式";

    }
  }
}

function MonitorChart() {


  for (let i = 0; i < chartList.value.length; i++) {
    const chartInstance = echarts.init(mapRefs.value[i]);

    const chartData = {
      id: chartList.value[i].id,
      name: chartList.value[i].name,
      value: chartList.value[i].value || chartList.value[i].datatype.min,
    };

    monitorChart.value[i] = {
      chart: chartInstance,
      data: chartData,
    };

    const option = {
      tooltip: {
        formatter: `{b} <br/> {c} ${chartList.value[i].datatype.unit}`,
      },
      series: [
        {
          name: chartList.value[i].datatype.type,
          type: 'gauge',
          min: chartList.value[i].datatype.min,
          max: chartList.value[i].datatype.max,
          colorBy: 'data',
          splitNumber: 10,
          radius: '100%',
          splitLine: {
            distance: 4,
          },
          axisLabel: {
            fontSize: 10,
            distance: 10,
          },
          axisTick: {
            distance: 4,
          },
          axisLine: {
            lineStyle: {
              width: 8,
              color: [
                [0.2, '#409EFF'],
                [0.8, '#12d09f'],
                [1, '#F56C6C'],
              ],
              opacity: 0.3,
            },
          },
          pointer: {
            icon: 'triangle',
            length: '60%',
            width: 7,
          },
          progress: {
            show: true,
            width: 8,
          },
          detail: {
            valueAnimation: true,
            formatter: `{value} ${chartList.value[i].datatype.unit}`,
            offsetCenter: [0, '72%'],
            fontSize: 16,
          },
          data: [
            {
              value: chartData.value,
              name: chartData.name,
            },
          ],
          title: {
            offsetCenter: [0, '95%'],
            fontSize: 16,
            text: chartData.name,
          },
        },
      ],
    };

    option && chartInstance.setOption(option);
  }
}

const title = '设备控制 '
const activeKey = ref(['1']);
const checked = ref(false);
const shadow = ref('')

const sliderValue = ref(0);
const min = ref(0);
const max = ref(10);

const statusColor = {
  background: '#409EFF',
  color: '#fff',
  width: '130px'
}

const status = {
  width: '150px'
}

const options = [
  {
    value: '0',
    label: '低速挡位'
  },
  {
    value: '1',
    label: '中速挡位'
  },
  {
    value: '2',
    label: '中高速挡位'
  },
  {
    value: '3',
    label: '高速挡位'
  },
]

const props = defineProps(['deviceInfo', 'statusColor']);
const firmware = ref(null);
const openFirmware = ref(false);





const chartList = ref([

])

const deviceInfoStatus = ref({})
const deviceList = ref({
  datatype: {}
})

const devicename = ref("")

const report_monitor_name = ref("");//上报检测数据

const gear_name = ref("");//运行挡位

const deviceswitch_name = ref("");//设备开关

const temperature_name = ref("");//空气温度

const messageTscreen_name = ref("");//屏显消息

const light_color_name = ref("");//灯光

const device_irc_name = ref("");//sheb

const reseta_name = ref("")

const initData = async () => {
  //route.query.deviceId
  let res = await deviceApi.getRunningStatus({ deviceId: route.query.deviceId })
  if (res.code == 0) {
    deviceInfoStatus.value = res.data.data

    for (let i = 0; i < deviceInfoStatus.value.thingsModels.length; i++) {
      if (deviceInfoStatus.value.thingsModels[i].id === 'device') {
        // devicename.value = deviceInfoStatus.value.thingsModels[i].name
        devicename.value = "子设备"
        deviceList.value = deviceInfoStatus.value.thingsModels[i]
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'report_monitor') {
        //report_monitor_name.value = deviceInfoStatus.value.thingsModels[i].name
        report_monitor_name.value = "上报检测数据"
        report_monitor.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'gear') {
        //gear_name.value = deviceInfoStatus.value.thingsModels[i].name
        gear_name.value = "运行挡位"
        gear.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'switch') {
        //deviceswitch_name.value = deviceInfoStatus.value.thingsModels[i].name
        deviceswitch_name.value = "设备开关"
        deviceswitch.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'temperature') {
        //temperature_name.value = deviceInfoStatus.value.thingsModels[i].name
        temperature_name.value = "空气温度"
        temperature.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'message') {
        //messageTscreen_name.value = deviceInfoStatus.value.thingsModels[i].name
        messageTscreen_name.value = "屏显消息"
        messageTscreen.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'light_color') {
        //light_color_name.value = deviceInfoStatus.value.thingsModels[i].name
        light_color_name.value = "灯光"
        light_color.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'device_irc') {
        //device_irc_name.value = deviceInfoStatus.value.thingsModels[i].name
        device_irc_name.value = "射频遥控"
        device_irc.value = deviceInfoStatus.value.thingsModels[i].value
      } else if (deviceInfoStatus.value.thingsModels[i].id === 'reset') {
        // reseta_name.value = deviceInfoStatus.value.thingsModels[i].name
        reseta_name.value = "重启"
        reseta.value = deviceInfoStatus.value.thingsModels[i].value
      }
      //reseta
      //device_irc
      if (deviceInfoStatus.value.thingsModels[i].isChart === 1) {
        chartList.value.push(deviceInfoStatus.value.thingsModels[i])


      }

      //light_color
      //messageTscreen
      //temperature
      //deviceswitch
      //gear
    }


  }
}
onMounted(() => {
  initData();
  setTimeout(function () {
    MonitorChart();
  }, 1000)


})
</script>

<style scoped>
.custom-descriptions-item {
  margin-bottom: 0 !important;
  /* 使用 !important 来确保这个规则被应用 */
}

.icon-wrapper {
  position: relative;
  padding: 0px 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.25);
}

.icon-wrapper .anticon:first-child {
  left: 0;
}

.icon-wrapper .anticon:last-child {
  right: 0;
}
</style>